<!DOCTYPE html>
<html>
    <head>
        <title>scrollPage Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width">
        
        <link rel="stylesheet" href="css/style.css"/>
        <link rel="stylesheet" href="css/slider.css"/>
        <link rel="stylesheet" href="css/menu.css"/>
        <link rel="stylesheet" href="themes/default/default.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="themes/light/light.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="themes/dark/dark.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="themes/bar/bar.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" />

        <script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
        <script src="js/scrollIt.js" type="text/javascript"></script>
        <script src='js/scrollIt.min.js' type='text/javascript'></script>
        <script src='js/scrollPage.js' type='text/javascript'></script>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
        <script src="js/parallaxScroller.js"></script> 
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
        <script src="js/jquery.slides.min.js"></script>
        <script type="text/javascript" src="js/jquery.nivo.slider.js"></script>
        <script type="text/javascript">
            $(window).load(function() {
                $('#slider').nivoSlider({
                    effect: 'random'
                });
            });
        </script> 
        <script>$(document).ready(function() {
                var $sliders = $('.sliderw');

                //dla kazdego slidera na stronie...
                $sliders.each(function() {
                    var $current_slider = $(this);
                    var $lista = $('.lista', $current_slider);
                    var $li = $lista.children('li');

                    //jeżeli dla danego slidera LI jest więcej od 3 to będzie można przewijać, inaczej nie ma sensu

                    if ($li.length > 1) {
                        //wyliczamy odległość pojedynczego przesunięcia
                        var odleglosc = $li.eq(0).outerWidth() + parseInt($li.eq(0).css('margin-left')) + parseInt($li.eq(0).css('margin-right'));

                        //po kliknięciu next przesówamy listę w lewo. Przed 3 ostatnimi elementami na liście musimy ją zatrzymać tak, by nie robiła się "pusta dziura".
                        //Wyliczamy więc maksymalne przesuniecie w lewo
                        var maxLeft = odleglosc * $li.length - 1 * odleglosc;

                        //po kliknięciu na przycisk Poprzednie, przesówamy naszą listę w lewo
                        $('.next', $current_slider).click(function() {
                            if ($lista.position().left > -maxLeft) {
                                $($lista).not(':animated').animate({
                                    'left': '-=' + odleglosc
                                }, 500);
                            }
                        });

                        $('.prev', $current_slider).click(function() {
                            if ($lista.position().left < 0) {
                                $($lista).not(':animated').animate({
                                    'left': '+=' + odleglosc
                                }, 500);
                            }
                        });

                    } else {

                        //jeżeli dla danego slidera przewijanie ma nie działać, wyłączmy działanie jego next i prev
                        $('.next, .prev', $current_slider).click(function() {
                            $(this).preventDefault();
                            return true;
                        });

                    }
                });
            });</script>
    </head>
    <body>
        <section id='sliderSec' data-scroll-index='0'>
            <div id="l0" ><p>Od nas wyjdziesz <br/>
                    dobrze nakręcony</p>
                <button data-scroll-nav="3" type="button">Zobacz nasze opinie</button>
            </div>
            <div id="wrapper">
                <div class="slider-wrapper theme-default">
                    <div id="slider" class="nivoSlider">
                        <img src="./images/start1.jpg" data-thumb="./images/start1.jpg" alt="" />
                        <img src="./images/start2.jpg" data-thumb="./images/start2.jpg" alt="" />
                        <img src="./images/start3.jpg" data-thumb="./images/start3.jpg" alt="" />

                    </div>

                </div>

            </div>


        </section> 

        <section id="menuSec" >
            <div id='nav' data-scroll-index='1'><div style="float:left;margin: 10px 0 0 20px;"><img src="images/audio.jpg"></div>

                <ul>
                    <li><a class='active' data-scroll-nav='2'>Galeria</a></li>
                    <li><a data-scroll-nav="3">Opinie</a></li>
                    <li><a data-scroll-nav="4">Promocje</a></li>
                    <li><a data-scroll-nav="5">Cennik</a></li>
                    <li><a data-scroll-nav="6">Oferta</a></li>
                    <li><a data-scroll-nav="7">Firma</a></li>
                    <li><a data-scroll-nav="9">Kontakt</a></li>
                    <li><a data-scroll-nav="11">Partnerzy</a></li>
                </ul>

            </div>
        </section>
        <section id="galeriaSec" >
            <div id="l0" data-scroll-index='2'>
                <object id="myBanner" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1000" height="500">
          <param name="Movie" value="images/galeria.swf">
          <param name="bgcolor" value="#ffffff">
          <param name="quality" value="high">
          <param name="scale" value="noscale">
          <param name="menu" value="false">
          <param name="salign" value="t">
          <param name="allowscriptaccess" value="samedomain">
          <param name="wmode" value="transparent">
          <object type="application/x-shockwave-flash" data="images/galeria.swf" width="1000" height="500">
            <param name="bgcolor" value="#ffffff">
            <param name="quality" value="high">
            <param name="scale" value="noscale">
            <param name="menu" value="false">
            <param name="salign" value="t">
            <param name="allowscriptaccess" value="samedomain"> 
            <param name="wmode" value="transparent">
            <div>
              <a href="http://www.projektowaniestroninternetowych.eu">
                <img src="images/banner.jpg" alt="projektowanie stron internetowych" border="0"></a>
            </div>
          </object>
        </object>
            </div>
        </section>                                       
        <section id="opiniaSec" data-scroll-index='3'>
            <div class="opinia">

                <div class="sliderw" data-scroll-nav="3">  
                    <div class="swrapper"><div style="font-weight:normal;font-size:28px;margin-bottom:34px; text-align:left;">Opinie klientów</div>
                        <ul class="lista">
                            <li>
                                <div >

                                    W tym najważniejszym dniu każdy chce by wszystko przebiegło jak najlepiej, 
                                    z tym kamerzystą właśnie tak będzie. Pełen profesjonalizm, bardzo łatwy i dobry kontakt
                                    , a nasze największe zaskoczenie, że już po kilku dniach mogliśmy się cieszyć oglądając płytę. 
                                    Pan Romek jest najlepszy.  <br><br>

                                    <footer> <strong>Klaudia i Krzysztof</strong></footer><a class="next"><img src="images/next.png" alt=">"></a><a class="prev"><img src="images/back.png" alt="<"></a>

                                </div> 
                            </li>
                            <li>

                                <div >


                                    W tym najważniejszym dniu każdy chce by wszystko przebiegło jak najlepiej, 
                                    z tym kamerzystą właśnie tak będzie. Pełen profesjonalizm, bardzo łatwy i dobry koW tym najważniejszym dniu każdy chce by wszystko przebiegło jak najlepiej, 
                                    z tym kamerzystą właśnie tak będzie. Pełen profesjonalizm, bardzo łatwy i dobry kontakt
                                    , a nasze największe zaskoczenie, że już po kilku dniach mogliśmy się cieszyć oglądając płytę. 
                                    Pan Romek jest najlepszy :) <br><br>
                                    <footer> <strong>Klaudia i Krzysztof</strong></footer><a class="next"><img src="images/next.png" alt=">"></a><a class="prev"><img src="images/back.png" alt="<"></a>
                                </div> 
                            </li>
                            <li>

                                <div>

                                    W tym najważniejszym dniu każdy chce by wszystko przebiegło jak najlepiej, 
                                    z tym kamerzystą właśnie tak będzie. Pełen profesjonalizm, bardzo łatwy i dobry kontakt
                                    , a nasze największe zaskoczenie, że już po kilku dniach mogliśmy się cieszyć oglądając płytę. 
                                    Pan Romek jest najlepszy!!!.<br><br>
                                    <footer> <strong>Tomek i Ania</strong></footer><a class="next"><img src="images/next.png" alt=">"></a><a class="prev"><img src="images/back.png" alt="<"></a>

                                </div> 
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </section><a>
            <img class="" data-scroll-nav="0" src="images/powrot.jpg"></img>

        </a>

        <section id="promoSec" >
            <div id="l0" data-scroll-index='4'><p>Drugi komplet DVD dla <br/>
                    młodej pary GRATIS !!!</p>
                <small>Przy odbiorze płyt DVD ze zmontowanym zawierającym
                    rerportaż  <br/>z wesela pora młoda otrzymuje drugi komplet DVD GRATIS! 
                </small>
            </div>
        </section>
        <section id="serwisSec" ><div id="l1" >
               <img data-scroll-index='5'src="http://jee.serwkomp.net/images/slider.jpg" />
                <div id="article">
                    <article>
                        <table  >
                            <thead>
                                <tr>
                                    <th id ="left">Usługa </th>
                                    <th id ="centr">Szczegóły</th>
                                    <th id ="right">Cena</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Wesela jednodniowe</td>
                                    <td></td>
                                    <td>1300 PLN</td>
                                </tr>
                                <tr>
                                    <td>Wesela dwudniowe</td>
                                    <td></td>
                                    <td>1800 PLN</td>
                                </tr>
                                <tr>
                                    <td>Komunie</td>
                                    <td>asfasdfasdfasdfasdfasdgadfgsdfhfdghfdghdfghdfghfhfhdfghfdhgf</td>
                                    <td>50 PLN</td>
                                </tr>
                                <tr>
                                    <td>Grupowe studniówki (klasa min. 18 uczniów)</td>
                                    <td></td>
                                    <td>40 PLN</td>
                                </tr>
                                <tr>
                                    <td>Prace dyplomowe</td>
                                    <td></td>
                                    <td>300 - 500 PLN</td>
                                </tr>
                                <tr>
                                    <td>Inne usługi</td>
                                    <td></td>
                                    <td>cena do uzgodnienia</td>
                                </tr>

                            </tbody>
                        </table>

                    </article>

                </div> 
            </div>
        </section><a>
            <img class="" data-scroll-nav="0" src="images/powrot.jpg"></img>

        </a>

        <section id="ofetaSec" >
            <div id="l6" ><p data-scroll-index='6'>Studio filmowe ROMEX oferuje profesjonalne<br/>
                    filmowanie imprez i uroczystości okolicznościowych</p>
                <small >Śluby i wesela, studniówki. Komunie św., bankiety, jubileusze i rocznice. Chrzty św. koncerty, konferencje <br/>
                    i zjazdy, uroczystości żałobne, święta patronalne, uroczystości patriotyczne, archiwizacja z kaset VHS na <br/>
                    płyty DVD, imprezy plenerowe, filmy do prac dyplomowych, prymicje. <br/>

                </small>
            </div>
        </section>
        <section id="firmaSec" >
            <div id="l7" >
                <div class="sliderw" >
                    <div class="swrapper"><h3 >Firma </h3>
                        <ul class="lista">
                            <li>
                                <div data-scroll-index='7'>

                                    Studio Filmowe ,,ROMEX’’ rozpoczęło swą działalność w 1992r. Początki działalności to praca na 
                                    ,,nieśmiertelnych’’ kamerach Panasonic w formacie VHS, nagrywanie tzw. ,,na czysto’’ i sprzedaż materiału
                                    ,,po wyjęciu z kamery’’.
                                    <br><br>
                                    Późniejszy okres to proste generatory napisów, era AMIGI, praca na mikserach Audio-Video i stosowanie prostych animacji.
                                    <br><br>
                                    Coraz bardziej modna chęć posiadanie pamiątki po tak szczególnym wydarzeniu jak ślub, wesele, 
                                    pierwsza komunia św., studniówka, chrzest św., sprawiła że Studio ROMEX już w połowie lat 90-tych 
                                    ugruntowało swoją pozycję na lokalnym rynku usług video.
                                    <br><br>
                                    Dużą rolę w rozwoju firmy, szczególnie w początkowej fazie działalności, odegrała życzliwość i doradztwo techniczne Studia Filmowego ,,BP’’ z Czernicy.                    
                                    <a class="next"><img src="images/next.png" alt=">"></a><a class="prev"><img src="images/back.png" alt="<"></a>



                                </div> 
                            </li>
                            <li>
                                <div >

                                    Przez szereg lat swej działalności Studio ,,ROMEX’’ pogłębiało swe doświadczenia i wiedzę operatorską. Obecnie pracujemy kamerami cyfrowymi firmy ,,Canon’’ 3CCD. Montaż nieliniowy oraz profesjonalne programy do montażu i edycji materiału filmowego to już od wielu lat nasz chleb powszedni.
                                    <br><br>
                                    Należy jednak pamiętać, że nawet najlepsza kamera i najdroższy komputer nie zrobią dobrego reportażu czy filmu. Najważniejszy jest człowiek. Dlatego wychodzimy z założenia, iż potrzebny jest pomysł na stworzenie ciekawego materiału. Trzeba też włożyć w tą pracę wiele serca i własnej inwencji twórczej.
                                    <a class="next"><img src="images/next.png"></a><a class="prev"><img src="images/back.png"></a>



                                </div> 
                            </li>
                            <li>
                                <div >

                                    Jesteśmy otwarci na ciekawe pomysły i sugestie naszych klientów. Realizujemy  kilkadziesiąt filmów w roku, które są dobrą reklamą naszych usług. Każdy z operatorów ukończył specjalny kurs uprawniający do filmowania podczas uroczystości kościelnych. 
                                    Indywidualne wymogi i życzenia klientów łączymy z naszą kreatywnością i fachowością, popartymi wieloletnim doświadczeniem nabytym przy pracy z naprawdę rożnymi typami ludzkich charakterów. 
                                    <br><br>
                                    Zapraszamy Państwa do skorzystania z naszych usług.
                                    Pasja i zamiłowanie do tego co robimy gwarantują naszym klientom maksymalne zaangażowanie, wysoki poziom realizacji i najwyższą jakość.
                                    <a class="next"><img src="images/next.png"></a><a class="prev"><img src="images/back.png"></a>



                                </div> 
                            </li>
                        </ul>



                    </div>

                </div> 
            </div>
        </section><a>
            <img class="" data-scroll-nav="0" src="images/powrot.jpg"></img>

        </a>

        <section id="firmaSec2" >
            <div id="l8"  ><p>W siedzibie firmy służymy <br/>
                    radą i przykładami ze <br/>
                    zrealizowanych  reportarzy <br/><br/>
                    <button data-scroll-nav="3" type="button">Zarezerwuj termin</button>    
            </div>
        </section>
        <section id="kontaktSec">
            <div id="l9" data-scroll-index='9' > 
                <div style="color:#616161;text-align:left;">
                    <div style="float:right;">
                        <input class="ramka" name="Telefon" placeholder="Imię i nazwisko" style="width: 193px; height:34px;padding:0 5px;margin:0 16px 8px 0;" type="text"> <input class="ramka" name="Telefon" placeholder="Adres e-mail/telefon" style="width: 193px; height:34px;padding:0 5px;margin:0 16px 8px 0;" type="text"><br>
                        <textarea placeholder="Wiadomość" class="ramka" name="Branża" style="width: 365px; height:90px;padding:0 5px;margin:0 16px 0 0;"></textarea><a href=""><img src="images/send.jpg"></a></div>
                    <strong>Roman Sankalla</strong>
                    <br><br>
                    44-280 Rydutowy <br>
                    ul. Bohaterów Warszawy 115a
                    <br><br>
                    <strong>tel.:</strong> +48 32 457 84 06<br>
                    <strong>kom.:</strong> +48 608 805 116
                    <br><br>
                    <strong>e-mail:</strong> <a href="mailto:romexstudio@op.pl"><span style="font-weight:bold;color:#80A7D7;">romexstudio@op.pl</span></a>
                </div>
            </div>
        </section><a>
            <img class="" data-scroll-nav="0" src="images/powrot.jpg"></img>

        </a>

        <section id="map-canvas">
            <div id="map-canvas" data-scroll-index='9' > 
            </div>
        </section>
        <section id="partnerSec">
            <div id="l10" class="wrap"  > 

                <ol  data-scroll-index='11'>
                    <li ><a>Zespoły<br/>&nbsp;</a>


                    </li>
                    <li ><a>Domy weselne<br/>Restauracje</a>


                    </li>
                    <li ><a>Obrączki<br/> ślubne</a>


                    </li>
                    <li ><a>Samochody<br/> ślubne</a>

                    </li>
                    <li ><a>Bryczki i powozy<br/> ślubne</a>
                    </li>
                    <li ><a>Studia<br/> filmowe</a>
                    </li>
                    <li ><a>Fotografia <br/>ślubna</a>
                    </li>
                    <li ><a>Podróż poślubna <br/>pary młodej</a>

                    </li>
                </ol>
            </div>
        </section>
        <section id = "s11" data-scroll-index = '20'>
            <div id = 'nav-menu'>

                <ul>
                    <li><a data-scroll-nav = '2'>Galeria</a></li>
                    <li><a data-scroll-nav = "3">Opinie</a></li>
                    <li><a data-scroll-nav = "4">Promocje</a></li>
                    <li><a data-scroll-nav = "5">Cennik</a></li>
                    <li><a data-scroll-nav = "6">Oferta</a></li>
                    <li><a data-scroll-nav = "7">Firma</a></li>
                    <li><a data-scroll-nav = "9">Kontakt</a></li>
                    <li><a data-scroll-nav = "11">Partnerzy</a></li>
                </ul><br><div style="font-size:12px;margin:50px 0;">Copyright © 2013 Romex</div>

            </div>
        </section>
        <a ><img src="images/powrot.jpg" data-scroll-nav = "0"></a>
    </body>
</html>
